<template>
  <!-- <v-scale-screen ref="scale-screen" width="100%" height="100%" :fullScreen="true" style="background: white"> -->
  <!-- <div :class="[sidebar.opened ? 'container_open' : 'container_close']"> -->
  <div :class="'container_open'">
    <!--    第一行-->
    <div class="line1">
      <!--      系统时间-->
      <!--        <div class="card" style="background: linear-gradient(to right, #3b88fa, #0163f7)">-->
      <!--          <el-row class="system_time">-->
      <!--            <el-col :span="10">112</el-col>-->
      <!--            <el-col :span="2" style="display: flex;align-items: center">-->
      <!--              <div class="divider"></div>-->
      <!--            </el-col>-->
      <!--            <el-col :span="12">-->
      <!--              <div class="iconfont icon-ziyuanxhdpi"></div>-->
      <!--            </el-col>-->
      <!--          </el-row>-->
      <!--        </div>-->
      <div class="card" v-for="(item, index) in list" :key="index" :style="{background: item.color}">
        <div class="left">
          <div class="left-t">
            <span class="num">{{dataArr[index]}}</span>
            <span class="unit"> {{item.unit}}</span>
          </div>
          <div class="left-b">
            <span class="name">{{item.name}}</span>
          </div>
        </div>
        <div class="right">
          <div :class="['iconfont', item.icon]" style="font-size: 55px;"></div>
        </div>
      </div>
    </div>
    <!--    第二行-->
    <div class="line2">
      <div class="card">
        <!--          当日厂区总用能-->
        <Energy :sidebar="sidebar"></Energy>
      </div>
      <div class="card">
        <!--          当日厂区总负荷-->
        <Load :sidebar="sidebar"></Load>
      </div>
    </div>
    <!--    第三行-->
    <div class="line3">
      <div class="card">
        <TodayEnergyLeft :sidebar="sidebar" :chart-data="top1Data"></TodayEnergyLeft>
      </div>
      <div class="card">
        <TodayEnergyCenter :sidebar="sidebar" :chart-data="top2Data"></TodayEnergyCenter>
      </div>
      <div class="card">
        <TodayEnergyRight :sidebar="sidebar" :chart-data="top3Data"></TodayEnergyRight>
      </div>
    </div>
  </div>
  <!-- </v-scale-screen> -->
</template>

<script>
import {mapGetters} from "vuex";
import Energy from "@/views/summarize/components/Energy.vue";
import Load from "@/views/summarize/components/Load.vue";
import TodayEnergyLeft from "@/views/summarize/components/TodayEnergyLeft.vue";
import TodayEnergyCenter from "@/views/summarize/components/TodayEnergyCenter.vue";
import TodayEnergyRight from "@/views/summarize/components/TodayEnergyRight.vue";
import { getSummarizeList,getTopFlowList } from '@/api/datastatistics/meterread/energyReport.js'
import moment from "moment";
export default {
  name: 'Summarize',
  components: {
    Energy, Load, TodayEnergyLeft, TodayEnergyCenter, TodayEnergyRight,
  },
  data() {
    return {
      list: [
        // {name: '系统时间', icon: 'icon-shijian', color: 'linear-gradient(to right, #3b88fa, #0163f7)', num: 2, unit: '个'},
        {name: '用户数量', icon: 'icon-shebei2', color: 'linear-gradient(to right, #8c71f7, #7b63f4)', num: 0, unit: '个'},
        {name: '终端设备数', icon: 'icon-shebei', color: 'linear-gradient(to right, #10afa5, #07aaca)', num: 1, unit: '个'},
        {name: '楼宇数量', icon: 'icon-rongliangfenxi1', color: 'linear-gradient(to right, #ffb15d, #ff942a)', num: 1, unit: '个'},
        {name: '总能耗量', icon: 'icon-pingtaishuju', color: 'linear-gradient(to right, #fd6f5f, #ff7256)', num: 1, unit: 'kW'},
        {name: '总线损', icon: 'icon-huaban3', color: 'linear-gradient(to right, #2ca952, #3bc651)', num: 1, unit: 'kW'},
        
        // {name: '总无功', icon: 'icon-rongliangfenxi1', color: 'linear-gradient(to right, #35a7cc, #38b6db)', num: 1, unit: 'kVar'},
      ],
      dataArr:[
        0,0,0,0,0
      ],
      top1Data:{},
      top2Data:{},
      top3Data:{},
    }
  },
  computed: {
    ...mapGetters(['sidebar']),
    // isCollapse() {
    //   return !this.sidebar.opened;
    // }
  },
  mounted() {
    // console.log(this.sidebar,"sidebar");
    this.loadTopic();
    this.loadTop3Chart();
  },
  methods: {
    loadTopic(){
      getSummarizeList().then(response => {
        this.dataArr = response.data;
      });
    },
    loadTop3Chart(){
      getTopFlowList().then(response => {
        let data = response.data;
        this.top1Data = { hourList: data.hourList, data: data.top1 ? data.top1 : null};
        this.top2Data = { hourList: data.hourList, data: data.top2 ? data.top2 : null};
        this.top3Data = { hourList: data.hourList, data: data.top3 ? data.top3 : null};
      });
    }
  }
}
</script>
<style scoped lang="scss">
.container_open {
  height: 100%;
  width: 100%;
  background: white;
  padding: 10px 10px;
  overflow-y: auto;
}
.container_close {
  height: 930px;
  width: 1866px;
  background: white;
  padding: 10px 10px;
}
.line1{
  height: 110px;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  .card{
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    .left{
      color: white;
      display: flex;
      flex-direction: column; /* 垂直排列子元素 */
      justify-content: center; /* 垂直居中 */
      .num{
        //line-height: 30px;
        font-size: 28px;
        font-weight: 550;
      }
      .unit{
        font-size: 16px;
      }
      .name{
        line-height: 30px;
        font-size: 16px;
      }
    }
    .right{
      display: flex;
      align-items: center;
      justify-content: right;
    }
  }
}


.icon-ziyuanxhdpi{
  font-size: 50px;
}

.line2{
  height: 370px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  margin-top: 10px;
}
.line3{
  height: 320px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  margin-top: 10px;
}
.card{
  border-radius: 5px;
  border: 1px solid #d5d5d5;
  box-shadow: 0 0 10px #dfdfdf;
  padding: 18px 20px;
}

</style>
